<template>
    <div id="app">
      <img src="./assets/logo.png">
      <h2>Demo Links</h2>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/demo1">Demo1</router-link></li>
        <li><router-link to="/demo2">Demo2</router-link></li>
      </ul>
      <button @click="toggleDemo(1000)">切换Demo1&2 1000次</button>
      <button @click="toggleDemo(5000)">切换Demo1&2 5000次</button>
      <keep-alive>
        <router-view/>
      <keep-alive>
    </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    toggleDemo (times = 1) {
      console.log(times)
      let i = 0
      let interval = setInterval(() => {
        i++
        if (i > times) {
          clearInterval(interval)
          this.$router.push('/')
          return
        }
        this.$router.push(i % 2 ? '/demo1' : '/demo2')
      }, 5)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
